<template>
  <div class="home">
    <div class="mainBox">
      <div class="mainBox-left">
        <div
          class="dl"
          v-for="(item, index) in knowledgeArr"
          :key="index"
          @click="deil(item.id)"
        >
          <h3>{{ item.title }}</h3>
          <span></span>
          <dl>
            <dt>
              <img :src="item.cover" alt="" />
            </dt>
            <dd>
              <span>{{ item.summary }}</span>
              <p>
                <span
                  ><button>
                    <van-icon name="eye-o" />{{ item.order }}
                  </button></span
                >
                <span
                  ><button><van-icon name="share-o" />share</button></span
                >
              </p>
            </dd>
          </dl>
        </div>
      </div>
      <div class="mainBox-right">
        <div class="rightBox1">
          <div class="tagTitle">
            <b style="margin-left: 20px">recommendToReading</b>
          </div>
          <div class="rightBox-Remmoend">
            <ul
              class="remonendBox"
              v-for="(item, index) in remonendsArr"
              :key="index"
              @click="$router.push('/Detail/' + item.id)"
            >
              <li style="font-size: 14px; margin-left: 10px">
                {{ item.title }} · 12 天前
              </li>
            </ul>
          </div>
        </div>
        <div class="rightBox2">
          <div class="rightBox-tagTitle">
            <b style="margin-left: 20px">tagTitle</b>
          </div>
          <ul
            class="titleArr"
            v-for="(item, index) in categoryTitleArr"
            :key="index"
          >
            <li>
              <span style="display: inline-block; width: 100px">{{
                item.label
              }}</span>
              <span>total{{ item.articleCount }}articleCountTemplate</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getKnowledgeMain, GetData, CategoryTitle } from "../../api/index";
export default {
  data() {
    return {
      knowledgeArr: [],
      remonendsArr: [],
      categoryTitleArr: [],
    };
  },
  mounted() {
    this.getKnowledge();
    this.GetData();
    this.getCategoryTitle();
  },
  methods: {
    async getKnowledge() {
      const { data } = await getKnowledgeMain();
      this.knowledgeArr = data.data[0];
      console.log(data.data[0]);
    },
    async GetData() {
      const { data } = await GetData();
      this.remonendsArr = data.data;
      console.log(data.data);
    },
    async getCategoryTitle() {
      const { data } = await CategoryTitle();
      this.categoryTitleArr = data.data;
      console.log(data.data);
    },
    deil(id) {
      this.$router.push(`/knowDet/${id}`);
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
}
.home {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  .mainBox {
    width: 1000px;
    height: 100vh;
    margin: 0 auto;
    .mainBox-left {
      float: left;
      width: 650px;
      height: 100%;
      background: var(--contentBackground);
      .dl {
        width: 100%;
        height: 180px;
        color: var(--titleHcolor);

        dl dt {
          float: left;
          margin-right: 20px;
          color: var(--titleHcolor);
          img {
            display: inline-block;
            width: 200px;
            height: 120px;
          }
        }
        dl dd p {
          margin-top: 70px;
          color: var(--titleHcolor);
          span {
            margin-right: 40px;
            button {
              border: 0;
              background: none;
            }
          }
        }
      }
    }
    .mainBox-right {
      float: right;
      width: 330px;
      height: 100%;
      .rightBox1 {
        width: 330px;
        height: 270px;
        background: var(--contentBackground);
        margin-bottom: 30px;

        .rightBox-Remmoend li:hover {
          color: red;
        }
        .rightBox-Remmoend li {
          width: 300px;
          height: 32px;
          // 文字溢出部分显示...
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .rightBox-Remmoend .vscode {
          color: #000000a6;
        }
        .rightBox1 ul li {
          margin-top: 10px;
        }
        .tagTitle {
          width: 318px;
          height: 40px;
          font-size: 18px;
          border-bottom: 1px solid #f4f4f4;
          position: relative;
        }
        .tagTitle b {
          margin-top: 8px;
          position: absolute;
          margin-left: 5px;
        }
        .rightBox-Remmoend {
          width: 318px;
          height: 230px;
        }
        .rightBox-Remmoend ul li {
          color: var(--titleHcolor);
          margin-top: 6px;
        }
      }

      .rightBox2 {
        width: 330px;
        height: 270px;
        background: var(--contentBackground);

        .titleArr li {
          color: var(--titleHcolor);
          margin: 18px 0 0 5px;
        }
        .titleArr li:hover {
          color: red;
        }
      }
    }
  }
}
.remonendBox {
  animation: wrapper-gradient 2s linear;
}
.titleArr {
  animation: wrapper-gradient 2s linear;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes img-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
